<template>
  <dv-charts :option="option" />
</template>

<script>

export default {
  name: "PieChart",
  props: {
    // 数据
    chartsPieData: {
      type: Object,
      required: true,
    },
    // 是否显示数值标签
    insideLabelIsShow: {
      type: Boolean,
      required: false,
      default: true
    },
    // 是否显示为玫瑰饼图
    roseTypeIsShow: {
      type: Boolean,
      required: false,
      default: false
    },
    // 饼图半径大小
    pieRadius: {
      type: String,
      required: false,
      default:'50%'
    }
  },
  data() {
    return {
      option: {},
    };
  },
  methods: {
    createChart() {
      this.option = {
        series: [
          {
            data: this.chartsPieData.series,
            type: "pie",
            radius: this.pieRadius,
            insideLabel: {
              show: this.insideLabelIsShow
            },
            roseType: this.roseTypeIsShow
          }
        ]
      };
    },
  },
  watch: {
    chartsPieData: {
      handler(newValue, oldValue) {
        if (oldValue != newValue) {
          this.createChart();
        }
      },
      deep: true,
    },
  },
};
</script>

</style>
